<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:p="http://primefaces.org/ui"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:c="http://java.sun.com/jsp/jstl/core">
    <c:if test="#{!sesion.activa}">
        <!--#{!sesion.comprobar()}-->
    </c:if>
    <c:if test="#{!pCMenuEjecutivo.consultarPermisos().ver}">
        <h:panelGroup layout="block" styleClass="divsinpermisos">
            <p:outputLabel value="No tiene permisos suficientes para ver esta página"/>
        </h:panelGroup>
    </c:if>
    <c:if test="#{pCMenuEjecutivo.consultarPermisos().ver}">
        <ui:param name="nombreparam" value="menuEjecutivo" />
        <ui:param name="duracionparam" value="7000" />
        <ui:param name="efectshowparam" value="fade" />
        <ui:param name="efecthideparam" value="fade" />

        <h:panelGroup layout="block" id="divTabla#{nombreparam}" styleClass="delistar-js">
            <h:form id="formTabla#{nombreparam}">
                <p:growl id="growldel#{nombreparam}" widgetVar="wvgrowldel#{nombreparam}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" /> 
                <p:dataTable  var="item"
                              value="#{pCMenuEjecutivo.listado}"
                              rows="10"
                              paginator="true"
                              paginatorTemplate="Página: {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                              lazy="true"
                              resizableColumns="true"
                              paginatorAlwaysVisible="false"
                              emptyMessage="No hay #{lenguajeBean.devolverStringPlural(nombreparam)} que mostrar."
                              id="tableModel#{nombreparam}"  styleClass="tablaInterna"> 
                    <f:facet name="header">  

                        <p:toolbar id="tbx#{nombreparam}" style="margin-top: 4px; margin-bottom: 4px;">
                            <p:toolbarGroup align="left">
                                <p:commandLink value="Para crear un menú ejecutivo nuevo haga click aquí." 
                                               actionListener="#{pCMenuEjecutivo.reinicializarTemporal()}"
                                               process="@this"
                                               update=":tabs:formdata#{nombreparam}:dlgdata#{nombreparam}"
                                               oncomplete="wvdlgdata#{nombreparam}.show();"
                                               title="Crear #{lenguajeBean.devolverString(nombreparam)}"
                                               rendered="#{pCMenuEjecutivo.consultarPermisos().alta}"/>
                            </p:toolbarGroup>
                            <p:toolbarGroup>


                                <h:outputLabel styleClass="titulos" value="Listado de #{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}"
                                               rendered="#{sesion.mostrarTituloTabla}"/>

                                <p:selectCheckboxMenu styleClass="comboSeleccion" value="#{pCMenuEjecutivo.selectedChecksVisible}" label="Elegir columnas" panelStyle="width:220px"
                                                      panelStyleClass="saraza" >  
                                    <f:selectItems value="#{pCMenuEjecutivo.checksVisible}"/>
                                    <p:ajax event="change" listener="#{pCMenuEjecutivo.setearVisibles()}" process="@this"
                                            update=":tabs:formTabla#{nombreparam}"/>
                                </p:selectCheckboxMenu>  
                            </p:toolbarGroup>
                        </p:toolbar>
                    </f:facet>

                    <p:column sortBy="#{item.id}" filterBy="#{item.id}" rendered="#{pCMenuEjecutivo.getColVisible('id')}">
                        <f:facet name="header"> 
                            <h:outputText value="Id"/>
                        </f:facet>
                        <h:outputText value="#{item.id}"/>
                    </p:column>
                    <p:column sortBy="#{item.descripcionCorta}" filterBy="#{item.descripcionCorta}" rendered="#{pCMenuEjecutivo.getColVisible('descripcionCorta')}">
                        <f:facet name="header"> 
                            <h:outputText value="Desc. Corta"/>
                        </f:facet>
                        <h:outputText value="#{item.descripcionCorta}"/>
                    </p:column>
                    <p:column sortBy="#{item.descripcionLarga}" filterBy="#{item.descripcionLarga}" rendered="#{pCMenuEjecutivo.getColVisible('descripcionLarga')}">
                        <f:facet name="header"> 
                            <h:outputText value="Desc. Larga"/>
                        </f:facet>
                        <h:outputText value="#{item.descripcionLarga}"/>
                    </p:column>
                    <p:column sortBy="#{item.precio}" filterBy="#{item.precio}" rendered="#{pCMenuEjecutivo.getColVisible('precio')}">
                        <f:facet name="header"> 
                            <h:outputText value="Precio"/>
                        </f:facet>
                        <h:outputText value="#{item.precio}"/>
                    </p:column>
                    <p:column sortBy="#{item.dia}" filterBy="#{item.dia}" rendered="#{pCMenuEjecutivo.getColVisible('dia')}">
                        <f:facet name="header"> 
                            <h:outputText value="Día"/>
                        </f:facet>
                        <h:outputText value="#{item.dia}"/>
                    </p:column>
                    <p:column width="74" exportable="false">
                        <f:facet name="header">
                            <p:commandLink 
                                actionListener="#{pCMenuEjecutivo.reinicializarTemporal()}"
                                process="@this"
                                update=":tabs:formdata#{nombreparam}:dlgdata#{nombreparam}"
                                oncomplete="wvdlgdata#{nombreparam}.show();"
                                title="Crear #{lenguajeBean.devolverString(nombreparam)}"
                                rendered="#{pCMenuEjecutivo.consultarPermisos().alta}"  styleClass="agregarIco">
                                <h:graphicImage library="theme/images" name="agregar_.png" alt="Agregar un elemento" height="48" width="48" style="margin-left:8px;margin-top:4px" />
                            </p:commandLink>
                        </f:facet>
                        <p:commandLink
                            actionListener="#{pCMenuEjecutivo.establecerTemporal(item, true)}"
                            process="@this" title="Modificar #{lenguajeBean.devolverString(nombreparam)}" 
                            update=":tabs:formdata#{nombreparam}:dlgdata#{nombreparam}"
                            oncomplete="wvdlgdata#{nombreparam}.show();"
                            style="margin-right: 2px;"
                            disabled="#{!pCMenuEjecutivo.consultarPermisos().modificacion}"    styleClass="imagenIcono" >
                            <h:graphicImage library="theme/images" name="editar_ico.png" alt="Modificar un elemento" />

                        </p:commandLink>
                        <p:commandLink
                            actionListener="#{pCMenuEjecutivo.establecerTemporal(item, false)}"
                            process="@this"
                            style="margin-right: 2px;"
                            oncomplete="wvconfe#{nombreparam}.show();"
                            title="Eliminar #{lenguajeBean.devolverString(nombreparam)}"
                            disabled="#{!pCMenuEjecutivo.consultarPermisos().baja}"   styleClass="imagenIcono" >
                            <h:graphicImage library="theme/images" name="eliminar_ico.png" alt="Eliminar un elemento"/>
                        </p:commandLink>

                        <p:confirmDialog id="confe#{nombreparam}" widgetVar="wvconfe#{nombreparam}"
                                         header="Confirmar eliminación de #{lenguajeBean.devolverStringPlural(nombreparam)}" 
                                         closeOnEscape="true" closable="true" showEffect="#{efectshowparam}" hideEffect="#{efecthideparam}"
                                         message="¿Seguro que desea eliminar permanentemente el elemento seleccionado?">
                            <p:commandButton value="Si" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" 
                                             actionListener="#{pCMenuEjecutivo.eliminar()}"
                                             update="tableModel#{nombreparam} :tabs:formTabla#{nombreparam}:tableModel#{nombreparam}:tbx#{nombreparam} :tabs:formTabla#{nombreparam}:growldel#{nombreparam}"
                                             onclick="wvconfe#{nombreparam}.hide();" style="float: right;"/>  
                            <p:commandButton value="No" styleClass="ui-confirmdialog-no" 
                                             icon="ui-icon-close" onclick="wvconfe#{nombreparam}.hide();"
                                             style="float: right;"/>
                        </p:confirmDialog>
                    </p:column>

                </p:dataTable>
                <p:panel header="Exportar datos de la tabla" styleClass="exportar-datos">  
                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="excel.png" alt="Excel" />  
                        <p:dataExporter type="xls" encoding="iso-8859-1" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="pdf.png" alt="PDF" />  
                        <p:dataExporter type="pdf" encoding="iso-8859-1" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}"/>  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="csv.png" alt="CSV" />    
                        <p:dataExporter type="csv" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="xml.png" alt="XML" />  
                        <p:dataExporter type="xml" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  
                </p:panel>  
            </h:form>

            <h:form id="formdata#{nombreparam}">
                <p:growl id="growldata#{nombreparam}" widgetVar="wvgrowldata#{nombreparam}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" /> 
                <p:dialog modal="true" dynamic="true" resizable="false" closable="false" width="870px"
                          widgetVar="wvdlgdata#{nombreparam}" id="dlgdata#{nombreparam}"
                          header="#{pCMenuEjecutivo.devolverTituloDlg()} #{lenguajeBean.devolverString(nombreparam)}"
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}">

                    <h:panelGroup id="paneldialogodata#{nombreparam}" layout="block" 
                                  style="overflow: auto; display: block;">
                        <ui:include src="dialogoMenu.xhtml"/>
                    </h:panelGroup>
                </p:dialog>
            </h:form>

            <h:form id="formcols#{nombreparam}">
                <p:growl id="growl-cols#{nombreparam}" widgetVar="wvgrowl-cols#{nombreparam}"
                         autoUpdate="false" showDetail="false" showSummary="false" life="#{duracionparam}" /> 
                <p:dialog modal="true" dynamic="true" resizable="false" closable="true" width="450px"
                          widgetVar="wvdlgcols#{nombreparam}" id="dlgcols#{nombreparam}"
                          header="Elegir columnas de la tabla" closeOnEscape="true"
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}">
                    <p:message for="val-cols-#{nombreparam}" id="msg-cols-#{nombreparam}"/>
                    <p:selectManyCheckbox value="#{pCMenuEjecutivo.selectedChecksVisible}"  
                                          layout="pageDirection" id="val-cols-#{nombreparam}"
                                          required="true"
                                          requiredMessage="Debe seleccionar al menos una columna para ver.">  
                        <f:selectItems value="#{pCMenuEjecutivo.checksVisible}"/>
                        <p:ajax event="change" update="growl-cols#{nombreparam}"
                                listener="#{pCMenuEjecutivo.setearVisibles()}" process="@this"/>
                    </p:selectManyCheckbox>
                    <p:separator/>
                    <h:panelGroup layout="block" style="overflow: auto; display: block;">
                        <p:commandButton value="Aplicar" oncomplete="wvdlgcols#{nombreparam}.hide();"
                                         update=":tabs:formTabla#{nombreparam}:tableModel#{nombreparam}"
                                         style="float: right;" styleClass="btn-aceptar"/>
                        <p:commandButton value="Cancelar" oncomplete="wvdlgcols#{nombreparam}.hide();"
                                         style="float: right; margin-right: 10px;" styleClass="btn-cancelar"/>
                    </h:panelGroup>
                </p:dialog>
            </h:form>

            <p:dialog maximizable="false" minimizable="false" modal="true" id="dlgespera#{nombreparam}"
                      widgetVar="wvdlgespera#{nombreparam}">
                <p:progressBar widgetVar="pbAjax" ajax="true" value="100" labelTemplate="{value}%" styleClass="animated"/>
            </p:dialog>
        </h:panelGroup>
        <h:outputScript>
            function handle#{nombreparam}datarequest(xhr, status, args) {if (args.validationFailed || !args.correcto) {} else {wvdlgdata#{nombreparam}.hide();}}
        </h:outputScript>
    </c:if>
</ui:component>
